import React, { useState } from 'react';
import { Menu, Drawer } from 'antd';
import axios from 'axios';
import {Table,List,Typography,Breadcrumb,theme,Tooltip} from 'antd';
import { useEffect } from 'react';
import FooterPage from '@components/layout/footerPage';


const Construction = (props) => {
  const [current, setCurrent] = useState('project');
  const [projectData, setprojectData] = useState([]);
  const [thesisData, setThesisData] = useState([]);
  const [awardData, setAwardData] = useState([]);
  const [patentData, setPatentData] = useState([]);
  const [selectedintroduction, setSelectedintroduction] = useState(null);
  const [breadcrumbItems, setBreadcrumbItems] = useState([
    {
      title: '首页',
    },
    {
      title: '实验室建设',
    },
    {
      title: '科研项目',
    },
  ]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const proData = await axios.get('http://localhost:8080/web/lab_project/list', {});
        console.log(proData)
        console.log(proData.data.data)
        const projectresData = Array.from(proData.data.data);
        setprojectData(projectresData);

        const resData = await axios.get('http://localhost:8080/web/lab_achievement/list', {});
        console.log(resData)
        console.log(resData.data.data)
        const responseData = Array.from(resData.data.data);
        // setprojectData(projectDataArray);
        console.log(responseData);

        const thesisDataArray = responseData.filter(item => item.type === '论文专著');
        setThesisData(thesisDataArray);
  
        const awardDataArray = responseData.filter(item => item.type === '获奖成果');
        setAwardData(awardDataArray);
  
        const patentDataArray = responseData.filter(item => item.type === '发明专利');
        setPatentData(patentDataArray);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);
  const projectColumns = [
    {
      title: '项目名称',
      dataIndex: 'name',
      width: 130,
    },
    {
      title: '简介',
      dataIndex: 'text',
      align: 'center',
      render: (text,record) => (
        <Tooltip title="点击查看">
        <span
          style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', display: 'inline-block', maxWidth: '150px', cursor: 'pointer' }}
          onClick={() => showDrawer(record)}
        >
          {text.length > 10 ? text.slice(0, 10) + '...' : text}
        </span>          
        </Tooltip>
      ),
    },
    {
      title: '开始时间',
      dataIndex: 'stime',
      align: 'center',
    },
    {
      title: '结束时间',
      dataIndex: 'etime',
      align: 'center',
    },
    {
      title: '项目状态',
      dataIndex: 'enable',
      align: 'center',
    },
  ];

  const thesisColumns = [
    {
      title: '论文题目',
      dataIndex: 'name',
      width: 130,
    },
    {
      title: '作者',
      dataIndex: 'people',
      width: 150,
    },
    {
      title: '发表期刊',
      dataIndex: 'achievement',
      align: 'center',
    },
  ];

  const awardColumns = [
    {
      title: '成果名称',
      dataIndex: 'name',
      width: 130,
    },
    {
      title: '奖项',
      dataIndex: 'achievement',
      width: 150,
    },
    {
      title: '作者',
      dataIndex: 'people',
      align: 'center',
    },
  ];

  const patentColumns = [
    {
      title: '专利号',
      dataIndex: 'achievement',
      width: 130,
    },
    {
      title: '专利名称',
      dataIndex: 'name',
      width: 150,
    },
    {
      title: '发明人',
      dataIndex: 'people',
      align: 'center',
    },
  ];
  
  const handleClick = (e) => {
    setCurrent(e.key);
    const breadcrumb = [];

    breadcrumb.push({
      title: '首页',
    });
    breadcrumb.push({
      title: '实验室建设',
    });

    if (e.key === 'project') {
      breadcrumb.push({
        title: '科研项目',
      });
    } else {
      breadcrumb.push({
        title: '研究成果',
      });
      switch (e.key) {
        case 'thesis':
          breadcrumb.push({
            title: '论文专著',
          });
          break;

        case 'award':
          breadcrumb.push({
            title: '获奖成果',
          });
          break;

        case 'patent':
          breadcrumb.push({
            title: '发明专利',
          });
          break;
        default:
          break;
      }
    }

    setBreadcrumbItems(breadcrumb);
    const nonshowList = document.querySelectorAll('.nonshow3');
    nonshowList.forEach((element) => {
      element.classList.remove('show');
    });
    document.getElementById(e.key).classList.add('show');
  };
  const getBreadcrumbTitle = (key) => {
    switch (key) {                // 根据 key 值返回对应的面包屑导航文字
      case 'project':
        return '科研项目';
      case 'thesis':
        return '论文专著';
      case 'award':
        return '获奖成果';
      case 'patent':
        return '发明专利';
      default:
        return '';
    }
  };
  const { token } = theme.useToken();
  const [open, setOpen] = useState(false);
  const showDrawer = (introduction) => {
    setSelectedintroduction(introduction);
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const containerStyle = {
    position: 'relative',
    height: 1000,
    // textAlign: 'center',
    background: '#FFFFFF',
    border: `1px solid ${token.colorBorderSecondary}`,
    borderRadius: token.borderRadiusLG,
  };
  const paginationConfigt ={
    pageSize:9,
  }
  return (
    <div className='labconstruction'>
      <div className='content03'>
        <div className='left-box-03'>
          <div className={'kong-02'}></div>
          <Menu  style={{fontSize:"18px"}} onClick={handleClick} selectedKeys={[current]} mode="inline">
            <Menu.Item key="project">科研项目</Menu.Item>
            <Menu.SubMenu key="achievements" title="研究成果">
              <Menu.Item key="thesis">论文专著</Menu.Item>
              <Menu.Item key="award">获奖成果</Menu.Item>
              <Menu.Item key="patent">发明专利</Menu.Item>
            </Menu.SubMenu>
          </Menu>      
        </div>
        <div className={'right-box-03'}>
              <div className={'right-top-03'}>
                <p id="">实验室建设</p>
                <div className={'nav-path th'}>
                  <span>
                    <Breadcrumb style={{marginTop:"10px"}} items={breadcrumbItems} />              
                  </span>
                </div>
              </div>
              <div className="nonshow3 show" id="project">
              <Table dataSource={projectData} columns={projectColumns} pagination={paginationConfigt}/> 
              <pre>
                <Drawer
                  placement="bottom"
                  closable={false}
                  onClose={onClose}
                  open={open}
                  getContainer={false}
                  style={containerStyle}
                >
                  <div className='flowtitle'>
                    <span className='flowtitle01'>项目名称： {selectedintroduction && <span>{selectedintroduction.name}</span>}</span>
                    <span className='flowtitle02'>项目状态： {selectedintroduction && <span>{selectedintroduction.enable}</span>}</span>
                  </div>
                  <div className='content-title'>
                    项目简介
                  </div>
                  <div className='flowcontent'>
                    {selectedintroduction && <p>{selectedintroduction.text}</p>}
                  </div> 
                </Drawer> 
                  </pre>    
              </div>
              <div className="nonshow3" id="thesis">
                <Table dataSource={thesisData} columns={thesisColumns} pagination={paginationConfigt} />    
              </div>
              <div className="nonshow3" id="award">
                <Table dataSource={awardData} columns={awardColumns} pagination={paginationConfigt}/>
              </div>
              <div className="nonshow3" id="patent">
                <Table dataSource={patentData} columns={patentColumns} pagination={paginationConfigt}/>
              </div>
          </div>
      </div>
      <FooterPage />
    </div>
  );
};

export default Construction;